﻿@{
    ViewBag.Title = "  扫码支付测试  ";
}

<div class="container content" id="hpay">
    <div class="page-header">公众号支付页</div>
    <p class="well">
        请在Controller设置配置信息，并在微信手机端访问当前页面 ！
    </p>
    <!-- 表单 -->
    <pay-form v-on:postpayinfo="CallPayCode"></pay-form>

    <!-- 支付二维码弹窗 -->
    <pay-qr-modal :pay_code="pay_code" ></pay-qr-modal>
    <script type="x-template" id="pay-form">
        <form class="form-horizontal">
                    <div class="form-group">
                <label for="order_name" class="col-sm-2 control-label">订单名称：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="order_name" v-model="order.order_name" placeholder="订单名称">
                </div>
            </div>

            <div class="form-group">
                <label for="order_price" class="col-sm-2 control-label">订单金额：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="order_price" v-model="order.order_price" placeholder="订单金额">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">支付渠道：</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="pay_channel" id="inlineRadio1" checked="checked" v-model="order.pay_channel" value="10"> 微信
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="pay_channel" id="inlineRadio2" checked="checked" v-model="order.pay_channel" value="20"> 支付宝
                    </label>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" @@click="PostPayInfo" class="btn btn-default"
                            v-bind:disabled="is_submit?true:false" v-text='is_submit?"支付中":"支付"'>
                        支付
                    </button>

                </div>
            </div>
        </form>
    </script>

    <!-- Modal -->
    <script type="x-template" id="pay-qr-template">        
   
        <div class="modal" id="pay-qr-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <span id="qr-code-contanier"></span>
                        {{pay_code}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    
    </script>
</div>

@section Scripts{
    <environment names="Development">
        <script src="~/lib/vue/dist/vue.js" asp-append-version="true"></script>
        <script src="~/lib/qrcode/qrcode.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="@ViewBag.CssStaticPath/lib/vue/dist/vue.min.js" asp-append-version="true"></script>
        <script src="@ViewBag.CssStaticPath/lib/qrcode/qrcode.js" asp-append-version="true"></script>
    </environment>
    <script>
        Vue.component("pay-form",
        {
            template: "#pay-form",
            data: function() {
                return {
                    order: {
                        order_name: "",
                        order_price: 0,
                        pay_channel: "10"
                    },
                    is_submit: false
                }
            },
            methods: {
                PostPayInfo: function () {
                    var self = this;

                    this.is_submit = true;
                    console.info(self.order);
     
                    $.post("/scanpay/ZPay",
                        self.order,
                        function(result) {
                            self.is_submit = false;
                            self.$emit('postpayinfo', self.order.pay_channel, result);
                        });
                }
            }
        });

        Vue.component("pay-qr-modal",
        {
            template: "#pay-qr-template",
            props: ["pay_code"]
        });
        var payVue = new Vue({
            el: "#hpay",
            data: {
                pay_code: ""
            },
            methods: {
                CallPayCode: function (channel, res) {
                    $("#pay-qr-modal").modal();
                    this.pay_code = res.qr_code;

                    var typeNumber = 4;
                    var errorCorrectionLevel = 'L';
                    var qr = qrcode(typeNumber, errorCorrectionLevel);
                    qr.addData(res.qr_code);
                    qr.make();
                    document.getElementById('qr-code-contanier').innerHTML = qr.createImgTag();
                }
            }
        });
    </script>
}
